<template>
  <div class="sys-dialog">
    <el-dialog
      title="设置权益"
      :visible.sync="isShow"
      :before-close="handleClose"
      :destroy-on-close="!isShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      lock-scroll
      custom-class="crud-dialog small"
      center
    >
      <div class="flex-1 auto dialog-content">
      <div class="current-role-info">
        <el-tag>当前角色：{{ form.roleName }}</el-tag>
      </div>
      <div class="role-menu-container">
        <el-tree
          ref="tree"
          :data="menuList"
          show-checkbox
          node-key="id"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
      </div>

      </div>
      <div class="flex flex-center dialog-footer">
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        <el-button @click="handleClose()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {treeFormOption} from "./option";
import {
  getTenantPermission,
  setRoleMenu,
  getUserRolePermissionByRoleId,
} from "@/api/role";

const handle = (obj) => {
  obj.menuName = obj.meta.title;
  if (obj.children) {
    obj.children = obj.children.map((item) => handle(item));
  }
  return obj;
};

export default {
  props: {
    menuList: {
      required: true,
      type: Array,
      // default: () => {
      //   return [];
      // },
    },
  },
  data() {
    return {
      isShow: false,
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
        id: "id",
      },
      form: {
        roleName: "",
        permissionIds: [],
        roleId: "",
      },
      parentMenuIds: null,
    };
  },
  computed: {
    treeFormOption() {
      return treeFormOption.call(this);
    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 构建父节点id数组
    getParentMenuIds(menus, parentMenuIds) {
      // console.log(...arguments);
      if (menus && menus.length > 0) {
        menus.forEach((menu) => {
          if (menu.children && menu.children.length > 0) {
            this.getParentMenuIds(menu.children, parentMenuIds);
            parentMenuIds.push(menu.id);
          }
        });
      }
    },
    open(row) {
      this.form.roleName = row.roleName;
      this.form.roleId = row.id;
        this.isShow = true;
      this.getUserRolePermission();
      this.$forceUpdate()
      // console.log(this.treeFormOption.column[1].dicData)
    },
    initForm() {
      this.form = {
        roleName: "",
        permissionIds: [],
        roleId: "",
      };
      this.parentMenuIds = null;
    },
    // 过滤出叶子节点id
    filterChildMenus(menuIds) {
      const resultMenuIds = [];
      if (this.parentMenuIds === null) {
        const pIds = [];
        this.getParentMenuIds(this.menuList, pIds);
        this.parentMenuIds = pIds;
      }
      if (this.parentMenuIds) {
        if (menuIds) {
          menuIds.forEach((menuId) => {
            if (!this.parentMenuIds.includes(menuId)) {
              resultMenuIds.push(menuId);
            }
          });
        }
      }
      return resultMenuIds;
    },
    getUserRolePermission() {
      getUserRolePermissionByRoleId(this.form.roleId).then((res) => {
        this.form.permissionIds = res.result || [];
        this.$refs.tree.setCheckedKeys(
          this.filterChildMenus(this.form.permissionIds),
          false
        );
        // console.log(this.form.permissionIds);
      });
    },
    handleClose() {
      this.isShow = false;
      this.initForm();
    },
    // submit(form) {
    //   console.log(form);
    //   const permissionIds = this.form.permissionIds.split();
    //   {
    //     roleId: this.form.roleId,
    //     permissionIds: this.form.permissionIds,
    //   }
    //   setRoleMenu(this.form).then((res) => {
    //     console.log("设置权益");
    //     if (res.success === true) {
    //       this.$message.success("设置成功");
    //     }
    //   });
    // },
    /**
     * 获取选中的节点key
     */
    getCheckedKeys() {
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      // 利用set没有重复的值这一特性, 实现数组去重
      return Array.from(new Set([...checkedKeys, ...halfCheckedKeys]));
    },
    handleSubmit() {
      const data = {
        ...this.form,
        permissionIds: this.getCheckedKeys(),
      }
      if (data.permissionIds.length === 0) {
        this.$message.error('请至少勾选一项权益')
        return false
      }
      setRoleMenu(data).then((res) => {
        console.log("设置权益");
        if (res.success === true) {
          this.$message.success("设置成功");
          this.$emit("ok");
          this.handleClose();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
